<template>
  <div>
    <div class="banner" @click="handleGallaryClick">
      <div class="banner-img">
        <img
          src="http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_600x330_f922b488.jpg"
        >
        <div class="banner-title">{{list}}</div>
        <div class="banner-num">
          <span class="iconfont tupian">&#xe608;</span>18
        </div>
      </div>
    </div>
    <fade-animation>
      <!-- 相当于fadeAnimation里的slot插槽 -->
      <common-gallary :imgs="imgs" v-show="showGallary" @showGallary="handleClose"></common-gallary>
    </fade-animation>
  </div>
</template>

<script>
import fadeAnimation from '../../../common/fadeAnimation/fadeAnimation'
import commonGallary from "../../../common/gallary/Gallary";
export default {
  name: "detailInfo",
  props: {
    list: String
  },
  data() {
    return {
      imgs: [
        "http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_350x240_8e61302a.jpg",
        "http://img1.qunarzz.com/sight/p0/1410/e3/73da8d3e19cdc41c1932d4fcd22ec792.water.jpg_350x240_af846382.jpg"
      ],
      showGallary: false
    };
  },
  methods: {
    handleGallaryClick() {
      this.showGallary = true;
    },
    handleClose() {
      this.showGallary = false;
    }
  },
  components: {
    commonGallary,
    fadeAnimation
  }
};
</script>

<style lang="less" scoped>
.banner {
  // height: 50rem;
  .banner-img {
    position: relative;
    overflow: hidden;
    height: 0;
    padding-bottom: 55%;
    img {
      width: 100%;
    }
    .banner-title {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 0.6rem;
      line-height: 0.6rem;
      color: #fff;
      background-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0.8)
      );
      padding-left: 0.3rem;
    }
    .banner-num {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 1.2rem;
      height: 0.4rem;
      line-height: 0.4rem;
      background-color: rgba(0, 0, 0, 0.8);
      border-radius: 0.2rem;
      color: #fff;
      text-align: center;
      margin-bottom: 0.2rem;
    }
  }
}
</style>
